import React from 'react';

// https://zh-hans.reactjs.org/docs/higher-order-components.html
// hoc

import { Divider } from 'antd';

// 逻辑复用
// dva dynamic 懒加载 动态加载组件??
// 路由的 Route组件 withRoute 混入props
// redux connect
// https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect
// const ConnectedComment = connect(commentSelector, commentActions)(CommentList);
// 强化组件
// vue mixins

// 自定义hooks

// 1. 属性代理 对原组件进行加强 低耦合 可以嵌套使用
// 2. 反向继承

// 不要在render方法中使用hoc
// 务必复制静态方法
// refs不会被传递 要使用 forwardRef

import Demo1 from './demo1';
import { HOC1, HOC2 } from './demo2';
import Demo3 from './demo3';
import Demo4 from './demo4';
import { Once, Twice } from './demo5';
import Demo6 from './demo6';

export default function HocComp() {
  return (
    <div className="hoc">
      <Demo1 />
      <Divider />
      {/* 类型“WrapComponent”缺少类型“ElementClass”的以下属性: context, setState, forceUpdate, props */}
      {/* @ts-ignore */}
      <HOC1 />
      <Divider />
      {/* <HOC2 /> */}
      <Divider />
      <Demo3 />
      <Divider />
      <Demo4 />
      <Divider />
      <Once />
      <Divider />
      <Twice />
      <Divider />
      <Demo6 />
      <Divider />
    </div>
  );
}
